
{% stylesheet %}
.block_hot_spot {
  color: var(--text-color);
  background-color: var(--bg-color);
}
.block_hot_spot .img_box {
  height: 100%;
}
@media screen and (min-width: 768px) {
  .block_hot_spot .img_box {
    grid-area: 1/1/span 3/span 3;
  }
}
.block_hot_spot .img_box .mask {
  background-color: var(--mask-bg);
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;

}
.block_hot_spot .text_box {
  z-index: 1;
  max-width: 300px;
}
@media screen and (max-width: 767px) {
  .block_hot_spot .text_box {
    position: relative;
    margin: 0 auto;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .block_hot_spot .text_box {
    grid-area: 1/1/auto/span 1;
  }
}
@keyframes ping {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
.block_hot_spot .hot_spot .hot_item {
  --hot-spot-background: 255 255 255;
  cursor: pointer;
  left: var(--row-position);
  top: var(--column-position);
}
@media screen and (max-width: 767px) {
  .block_hot_spot .hot_spot .hot_item {
    left: var(--row-mobile-position);
    top: var(--column-mobile-position);
  }
}
.block_hot_spot .hot_spot .hot_item.active svg {
  transform: rotate(45deg);
}
.block_hot_spot .hot_spot .hot_item svg {
  transition: transform 0.2s ease-in-out;
}
.block_hot_spot .hot_spot .hot_item.right .content {
  transform: translateX(calc(50% + 48px));
}
.block_hot_spot .hot_spot .hot_item .content {
  transform: translateX(calc(-50% - 48px));
  width: max-content;
  display: none;
  box-shadow: 0 5px 15px rgba(26, 26, 26, 0.1);
}
.block_hot_spot .hot_spot .hot_item .content .hot_title {
  font-size: 1.25rem;
  font-weight: bold;
}
.block_hot_spot .hot_spot .hot_item::before {
  content: "";
  inset: -0.625rem;
  position: absolute;
}
.block_hot_spot .hot_spot .hot_item::after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  padding: 1rem;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--hot-spot-background)/0) 0%, rgb(var(--hot-spot-background)/0.3) 100%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  animation: 2s ease-in-out infinite alternate ping;
}
@media screen and (max-width: 767px) {
  .block_hot_spot .hot_spot .hot_item::after {
    padding: 0.625rem;
  }
}
.block_hot_spot .img_box img{
	width:100%;
	height:100%;
	object-fit: cover;
	border: 0px;
    vertical-align: top;
}
.block_hot_spot .hidden{
	display:none;
}
.block_hot_spot .block{
	display: block;

}
.relative{
	position: relative;
}
@media (min-width: 768px) {
	.block_hot_spot .md-block {
		display: block;
	}
	.block_hot_spot  .md-hidden {
		display: none;
	}
}
.hot_spot_overlay_btn{
  display: flex;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.hot_spot_overlay{
	flex-direction: column;
  align-items: center;
  gap: 1rem
}

.hot_spot_overlay {
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    width: 100vw;
  }

  .hot_spot_overlay .content_box .content {
    position: relative;
    width: 100%;
  }

  .hot_spot_overlay .content_box .content .hot_img img {
    width: var(--img-width);
    object-fit: cover;
    border-radius: 8px;
  }

  @media (max-width: 767px) {
    .hot_spot_overlay .public_title {
      font-size: 16px !important;
    }
    .hot_spot_overlay .hot_detail {
      font-size: 14px !important;
    }
  }
  

  .hot_spot .hot_img img{
    width: var(--img-width);
    object-fit: cover;
    border-radius: 8px;
  }
  .block_hot_spot .hot_spot{
    color: #000000;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
  }
  .block_hot_spot .hot_spot .hot_item{
    position: absolute;
    z-index:20;
    width:32px;
    height:32px;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    justify-content: center;
    align-items: center;
    display: flex;
  }
  @media (min-width: 768px) {
    .block_hot_spot .hot_spot .hot_item{
      width:48px;
      height:48px;
    }
  }
  .block_hot_spot .content,.hot_spot_overlay .content{
    position: absolute;
    box-sizing: border-box;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    padding: 1rem
    }/* __play_start_utilities__ */

    @media (min-width: 768px){
    .block_hot_spot .content,.hot_spot_overlay .content{
    max-height: 350px;
    max-width: 380px;
    padding: 2rem
    }
    }/* __play_end_utilities__ */

    .mb-3{
      margin-bottom: 0.75rem;
    }
    .mt-4{
      margin-top: 1rem;
    }
{% endstylesheet %}

{% assign data = section.settings %}
<div class="block_hot_spot" id="block_hot_spot-{{ block_id | default : section.block_id  }}" style="--text-color: {{data.text_color}};--bg-color: {{data.bg_color}};">

  <div class="container_full">
	  {% include 'block_title', title: data.title, detail: data.detail %}

    <div class="img_box relative">
      {% include 'lazy_img',src: data.image.src,alt: data.image.alt,class: ' hidden md-block',file_type: 'banner'%}
			{% if data.mobile_image.src == '' %}
			{% include 'lazy_img',src: data.image.src,alt: data.image.alt,class: ' block md-hidden',file_type: 'banner'%}
			{% else %}
			{% include 'lazy_img',src: data.mobile_image.src,alt: data.mobile_image.alt,class: ' block md-hidden',file_type: 'banner'%}
			{% endif %}
      <div class="mask " style="--mask-bg: {{data.mask_bg}};"></div>
      {% include 'hot_spot',blocks: section.blocks %}
    </div>
  </div>
</div>


<script>
	$(function () {
	  $('#block_hot_spot-{{ block_id | default : section.block_id  }} .hot_spot .hot_item').on('click', function (e) { 
		e.stopPropagation();
		if ($(window).width() >= 768) {
		  $(this).find('.content').toggle();
		  $(this).toggleClass('active')
		} else {
		  let cloneNode = $(this).find('.content').clone();
		  let template = `
		<div class="hot_spot_overlay items-center flex-col gap-4">
		  <button class="hot_spot_overlay_btn">
			<svg role="presentation" stroke-width="2" focusable="false" width="24" height="24" class="icon icon-close" viewBox="0 0 24 24">
			  <path d="M17.658 6.343 6.344 17.657M17.658 17.657 6.344 6.343" stroke="currentColor"></path>
			</svg>
		  </button>
		  <div class="content_box">
			<div class="content">${cloneNode.html()}</div>
		  </div>
		</div>
		`;
		  const popupLayer = moi.popup({ load: true });
		  popupLayer.addContent(template);
		  $('.hot_spot_overlay button').on('click', function () {
			popupLayer.close();
		  });
		}
	  });
	});
</script>

{% schema %}
{
	"class": "block_hot_spot",
	"is_global": false,
	"icon": "icon-Tupian",
	"name": {
		"zh_CN": "图片热点",
		"en_US": "Image hotspots"
	},
	"max_blocks": 20,
	"blocks": [
		{
			"name": {
				"zh_CN": "热点"
			},
			"type": "item",
			"settings": [
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "横向位置(PC端)",
						"en_US": "Horizontal position (PC side)"
					},
					"id": "row_position",
					"max": 100,
					"min": 0,
					"unit": "%",
					"default": 50
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "纵向位置(PC端)",
						"en_US": "Vertical position (PC side)"
					},
					"id": "column_position",
					"max": 100,
					"min": 0,
					"unit": "%",
					"default": 50
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "横向位置(移动端)",
						"en_US": "Landscape position (mobile)"
					},
					"id": "row_mobile_position",
					"max": 100,
					"min": 0,
					"unit": "%",
					"default": 50
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "纵向位置(移动端)",
						"en_US": "Vertical position (mobile)"
					},
					"id": "column_mobile_position",
					"max": 100,
					"min": 0,
					"unit": "%",
					"default": 50
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {	
						"zh_CN": "建议尺寸：200 x 200px"
					},
					"id": "image"
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "图片宽度",
						"en_US": "Image width"
					},
					"id": "img_width",
					"max": 100,
					"min": 20,
					"unit": "px",
					"default": 32
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Feature name"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "detail",
					"default": "Share useful information about your product features."
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "内容显示位置",
						"en_US": "Content display position"
					},
					"default": "right",
					"id": "position",
					"option": [
						{
							"label": {
								"zh_CN": "居右",
								"en_US": "To the right"
							},
							"value": "right"
						},
						{
							"label": {
								"zh_CN": "居左",
								"en_US": "To the left"
							},
							"value": "left"
						}
					]
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": ""
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc端图片",
				"en_US": "Image on PC"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议：1920*600px",
				"en_US": "Suggested size: 1920*600px"
			},
			"id": "image"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端图片",
				"en_US": "Mobile image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议：1242*900px",
				"en_US": "Size suggested: 1242*900px"
			},
			"id": "mobile_image"
		},
		{
			"type": "card_color",
			"id": "mask_bg",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,0)"
		}
	],
	"default": {
        "settings": {
          "image": {
            "src": "/uploads/themes/51842/cart/resources/20230815/7e57e425bffe17a8fe177e7e08c1d07b.jpg",
            "alt": ""
          },
          "mobile_image": {
            "src": "",
            "alt": ""
          },
          "title": "Sport: inspire movement",
          "detail": "Balance weight supports the headphone to stand alone. We no longer need to get annoyed while searching a unnoticeable headphone, or to get it to stand up. ",
          "mask_bg": "rgba(0,0,0,.1)"
        },
        "blocks": [
          {
            "row_position": 50,
            "column_position": 50,
            "row_mobile_position": 50,
            "column_mobile_position": 50,
            "image": {
              "src": "",
              "alt": ""
            },
            "img_width": 32,
            "title": "Feature name",
            "detail": "Share useful information about your product features.",
            "position": "left",
            "block_type": "item"
          },
          {
            "row_position": 40,
            "column_position": 60,
            "row_mobile_position": 20,
            "column_mobile_position": 20,
            "image": {
              "src": "",
              "alt": ""
            },
            "img_width": 32,
            "title": "Feature name",
            "detail": "Share useful information about your product features.",
            "position": "right",
            "block_type": "item"
          }
        ]
      }
}
{% endschema %}
